const path = require('path')
const webpack = require('webpack')
// npm install html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 演示热更新
module.exports = (env) => {
  return {
    // 生产环境将默认使用 TerserPlugin 来压缩并且混淆代码
    mode: env.production ? 'production' : 'development',
    entry: './src/index.js',

    // mode 为 development 时使用 inline-source-map 会内联插入代码，可以追踪错误代码准确信息和源代码的错误位置. 显著增加 bundle 体积, 降低整体性能, 但是构建速度快
    // mode 为 production 时应该选用 source-map. 外置一个 sourceMap 文件, 同样可以追踪错误代码准确信息和源代码的错误位置
    // 打开这个选项后, development 产出的 bundle.js 从 555kb 提升到 1.38MB
    // 代码里产生的错误有更明显的指引.
    // ...(env.production ? { devtool: 'source-map' } : { devtool: 'inline-source-map' }),

    // 提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能
    // 将 dist 目录下的文件 serve 到 localhost:8080 下
    // npm install --save-dev webpack-dev-server
    devServer: {
      static: './dist',
      // 开启支持热更新. 控制台能看到 [HMR] 相关打印
      hot: true
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      // 在每次构建前清理 /dist 文件夹
      clean: true
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      // 用来生成 dist/index.html 的
      // 所有的 output 的 bundle 会自动添加到 html 中。
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ]
  }
}
